<template>
	<view class="content">

		<view id='contentView'>

			<view>账号名:{{this.username}}</view>
			<view>职务:{{this.profession}}</view>

			<button @click="loginOut">注销登录</button>
		</view>



		<view id='buttomNavigation'>

			<!-- 这是学生专用的界面 -->

			<view class="nav" v-if="profession=='student'" @click="()=>{clickNavi('打卡')}">打卡</view>
			<view class="nav" v-if="profession=='student'" @click="()=>{clickNavi('个人信息')}">个人信息</view>


			<!-- 这是老师的页面 -->
			<view class="nav" v-if="profession=='teacher'" @click="()=>{clickNavi('管理课程')}">管理课程</view>
			<view class="nav" v-if="profession=='teacher'" @click="()=>{clickNavi('管理学生')}">管理学生</view>
			<view class="nav" v-if="profession=='teacher'" @click="()=>{clickNavi('个人信息')}">个人信息</view>


			<!--这是管理员的页面 -->
			<view class="nav" v-if="profession=='admin'" @click="()=>{clickNavi('导入教师')}">导入教师</view>
			<view class="nav" v-if="profession=='admin'" @click="()=>{clickNavi('个人信息')}">个人信息</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				profession:'',
				username:''
			}
		},
		onLoad() {
			// 这里应该是尝试拉取数据的地方
			console.log("当前尝试拉取数据");
            this.profession = uni.getStorageSync('user').split('-')[2]
            this.username = uni.getStorageSync('user').split('-')[0]
            console.log('this.profession',this.profession);     


		},
		mounted() {
           
			this.profession = uni.getStorageSync('user').split('-')[2]
			this.username = uni.getStorageSync('user').split('-')[0]
			 console.log('this.profession',this.profession);
		},
		methods: {

			clickNavi(e) {

				console.log('查看当前点击事件', e);

				if (e == '个人信息') {

					uni.switchTab({
						url: 'userInfo'
					});


				} else if (e == '打卡') {

                    console.log("触发跳转");

					uni.switchTab({
						url: 'punchCard',
						success: (res) => {
							// #ifdef APP-PLUS
							let page = getCurrentPages().pop(); //跳转页面成功之后
							if (!page) return;
							// page.loadData(); //如果页面存在，则重新刷新页面
							console.log("触发页面刷新");
							// #endif 
						}
					});



				} else if (e == '课程信息') {

					uni.switchTab({
						url: 'studentCourseInfo',
						success: (res) => {
							// #ifdef APP-PLUS
							let page = getCurrentPages().pop(); //跳转页面成功之后
							if (!page) return;
							// page.loadData(); //如果页面存在，则重新刷新页面
							console.log("触发页面刷新");
							// #endif 
						}
					});

				} else if (e == '管理课程') {

					console.log("触发管理课程动作");

					uni.switchTab({
						url: 'createCouse',
						success: (res) => {
							// #ifdef APP-PLUS
							let page = getCurrentPages().pop(); //跳转页面成功之后
							if (!page) return;
							// page.loadData(); //如果页面存在，则重新刷新页面
							console.log("触发页面刷新");
							// #endif 
						}
					});


				} else if (e == '管理学生') {

					console.log("触发管理学生动作");

					uni.switchTab({
						url: 'couseStudentAdmin',
						success: (res) => {
							// #ifdef APP-PLUS
							let page = getCurrentPages().pop(); //跳转页面成功之后
							if (!page) return;
							// page.loadData(); //如果页面存在，则重新刷新页面
							console.log("触发页面刷新");
							// #endif 
						}
					});

				} else if (e == '管理教师') {



				}



			},
			loginOut() {
				uni.setStorageSync('user', '');

				uni.switchTab({
					url: 'login',
					success: (res) => {
						// #ifdef APP-PLUS
						let page = getCurrentPages().pop(); //跳转页面成功之后
						if (!page) return;
						// page.loadData(); //如果页面存在，则重新刷新页面
						console.log("触发页面刷新");
						// #endif 
					}
				});


			}

		},
		onShow() {
			uni.hideTabBar({});
			this.profession = uni.getStorageSync('user').split('-')[2]
			this.username = uni.getStorageSync('user').split('-')[0]
			console.log(' onShow this.profession',this.profession);
		}
	}
</script>

<style>
	.content {
		/* 这是指定布局为flex */
		display: flex;
		/* 这是指定布局排列方式 */
		flex-direction: column;

		min-height: 100vh;
		/*100vh == height:100%,元素撑开与屏幕等高*/
	}

	#contentView {
		flex: 1;
	}

	#buttomNavigation {
		width: 100%;
		height: 30px;
		border: 1px solid black;
		display: flex;
		flex-direction: row;
		display: flex;
	}

	.nav {
		flex: 1;
		/*等分*/
		border: 1px solid red;
		font-size: 14px;
	}
</style>